import React from 'react';
import { Modal } from 'antd';
import SearchArea from "components/search-area";
import { messages, formatNumber } from 'share/common';
import ResizeTable from "components/resize-table";
import TRService from 'containers/data-center/report/travel-report/travel-report.service';
class TravelModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchForm: [
        {
          type: 'input',
          id: 'keyword',
          label: messages('components.key1358')/* 公司/姓名/职位 */,
          colSpan: 12
        },
      ],
      loading: false,
      data: [],
      page: 0,
      pageSize: 10,
      pagination: {
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ["10", "50", "100"],
      },
      searchParams: {},
      filterItems: [],
      columns: [],
      joinColumns: [
        { title: messages('budget.key18')/* 单据编号 */, dataIndex: 'businessCode', width: 150 },
        { title: messages('request.key270')/* 申请人姓名 */, dataIndex: 'applicantName', width: 150 },
        { title: messages('components.key1351')/* 申请人EID */, dataIndex: 'applicantEid', width: 150 },
        { title: messages('components.key1352')/* 所属机构/公司 */, dataIndex: 'company', width: 200 },
        { title: messages('setting.key319')/* 职位 */, dataIndex: 'position', width: 150 },
        { title: messages('setting.key1213')/* 姓名 */, dataIndex: 'name', width: 150 },
        { title: messages('components.key1353')/* 是否包含政府人员 */, dataIndex: 'isContainGov', width: 200 },
        { title: messages('components.key1354')/* 政府官员类型 */, dataIndex: 'customEnumerationItemOid', width: 200 },
        { title: messages('components.key1355')/* 12个月内同一人超两次 */, dataIndex: 'beyond', render: (text, recrod) => text ? '是' : '否', width: 200 },
        { title: messages('components.key1356')/* 超两次理由 */, dataIndex: 'reason', width: 200, render: text => text || '-' },
      ],
      expenseColumn: [
        { title: messages('budget.key18')/* 单据编号 */, dataIndex: 'businessCode', width: 150 },
        { title: messages('request.key270')/* 申请人姓名 */, dataIndex: 'applicantName', width: 100 },
        { title: messages('components.key1351')/* 申请人EID */, dataIndex: 'applicantEid', width: 150 },
        { title: messages('data-center.key103')/* 报销单号 */, dataIndex: 'expenseReportBusinessCode', width: 150 },
        { title: messages('components.key1357')/* 费用行金额 */, dataIndex: 'invoiceAmount', render: (text, record) => formatNumber(text), width: 150 },
        { title: messages('components.key1352')/* 所属机构/公司 */, dataIndex: 'company', width: 150 },
        { title: messages('setting.key319')/* 职位 */, dataIndex: 'position', width: 150 },
        { title: messages('setting.key1213')/* 姓名 */, dataIndex: 'name', width: 150 },
        { title: messages('components.key1353')/* 是否包含政府人员 */, dataIndex: 'isContainGov', width: 150 },
        { title: messages('components.key1354')/* 政府官员类型 */, dataIndex: 'customEnumerationItemOid', width: 150 },
        { title: messages('components.key1355')/* 12个月内同一人超两次 */, dataIndex: 'beyond', width: 150, render: (text, recrod) => text ? '是' : '否', },
        { title: messages('components.key1356')/* 超两次理由 */, dataIndex: 'reason', width: 150, render: text => text || '-' },
      ]
    }
  };

  componentWillReceiveProps(nextProps) {
    console.log('nextProps', nextProps)
    if (nextProps.visible) {
      this.getList();
    }
  }
  search = (values) => {
    // console.log('values', values)
    let serachParams = {
      keyword: values.keyword
    }
    this.setState({ searchParams: serachParams, page: 0 }, () => {
      this.getList();
    });
  };
  clear = () => {
    const searchParams = {};
    this.state.searchForm.map((form) => {
      if (
        form.type === "select" &&
        form.defaultValue &&
        form.defaultValue.key
      ) {
        searchParams[form.id] = form.defaultValue.key;
      } else {
        searchParams[form.id] = form.defaultValue;
      }
    });
    this.setState(
      {
        page: 0,
        filterItems: [],
        searchParams,
      },
      () => {
        this.getList();
      }
    );
  };
  getList = () => {
    let { page, pageSize, searchParams, pagination } = this.state;
    const { businessCode, title, invoiceOid } = this.props;
    this.setState({ loading: true });
    // console.log('1111111111')
    let params = {...searchParams, page, size: pageSize };
    if (title === '参与人信息') {
      params.businessCode = businessCode;
      TRService.getJoinPersonList(params).then(res => {
        console.log('res', res)
        if (res.status === 200) {
          this.setState({
            loading: false,
            pagination: { ...pagination, total: res.data.total, onChange: this.onChangePaper, onShowSizeChange: this.onShowSizeChange },
            data: res.data.records,
            columns: this.state.joinColumns
          })
        }
      })
    } else {
      params.invoiceOid = invoiceOid;
      TRService.getExpensePersonList(params).then(res => {
        console.log('res', res)
        if (res.status === 200) {
          this.setState({
            loading: false,
            pagination: { ...pagination, total: res.data.total, onChange: this.onChangePaper, onShowSizeChange: this.onShowSizeChange },
            data: res.data.records,
            columns: this.state.expenseColumn
          })
        }
      })
    }
  };

  onChangePaper = (page, pageSize) => {
    if (page - 1 !== this.state.page) {
      this.setState({ page: page - 1, pageSize }, () => {
        this.getList();
      });
    }
  };

  onShowSizeChange = (current, pageSize) => {
    this.setState({ page: current - 1, pageSize }, () => {
      this.getList();
    });
  };

  render() {
    const { visible, title, onOk, onCancel } = this.props;
    const { searchForm, pagination, loading, data, columns } = this.state;
    return (
      <Modal
        visible={visible}
        title={title}
        onCancel={onCancel}
        onOk={onOk}
        width={800}
        destroyOnClose
      >
        <SearchArea
          searchForm={searchForm}
          isReturnLabel
          submitHandle={this.search}
          clearHandle={this.clear}
          collapsible
          wrappedComponentRef={(inst) => (this.formRef = inst)}
        />
        <div className="table-header">
          <div className="table-header-title">
            {
              messages("common.total", {
                total: pagination.total,
              }) /*共搜索到 {pagination.total} 条数据*/
            }
          </div>
        </div>
        <ResizeTable
          rowKey="expenseReportOID"
          columns={columns}
          dataSource={data}
          pagination={pagination}
          loading={loading}
          bordered
          size="middle"
          scroll={{ x: 1750 }}
        />
      </Modal>
    )
  }
}

export default TravelModal;

